<!--
 Access control component for fine-grained access control.
-->
<script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { getSlot } from '/@/utils/helper/tsxHelper';

   export default defineComponent({
      name: 'Authority',
      props: {
         /**
          * Specified role is visible
          * When the permission mode is the role mode, the value value can pass the role value.
          * When the permission mode is background, the value value can pass the code permission value
          * @default ''
          */
         value: {
            type: [Number, Array, String] as PropType<RoleEnum | RoleEnum[] | string | string[]>,
            default: '',
         },
      },
      setup(props, { slots }) {
         const { hasPermission } = usePermission();

         /**
          * Render role button
          */
         function renderAuth() {
            const { value } = props;
            if (!value) {
               return getSlot(slots);
            }
            return hasPermission(value) ? getSlot(slots) : null;
         }

         return () => {
            // Role-based value control
            return renderAuth();
         };
      },
   });
</script>
